<template>
    <div class="big-box">
        <div class="search-box flex" v-if="isTypeShow">
            <div class="right-all" @click="showTypeFn" v-if="this.$route.path.indexOf('/recycleBin') == -1">
                {{typevalue}}
                <img src="../../assets/img/search/daosanjiao.png" alt="">
            </div>
            <input type="text" class="search-file" placeholder="搜索文件" v-model="inputvalue">
            <div class="searchbtnbox" @click="getSearchDataFn">
                <img src="../../assets/img/search/searchbtn.png" alt="" class="search-btn">
            </div>
        </div>
        <ul class="dropdown-box" v-if="isDropdownShow">
            <li v-for="item in dropdownData" @click="chooseTypeFn(item)">
                {{item.name}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      inputvalue: "", //input框内输入的搜索内容
      typevalue: "全部", //下拉选框默认显示类型
      typeSign: "", //下拉选框默认显示类型
      isTypeShow: true, //控制显示文件类型变量
      dropdownData: [
        // {sign:"txt",name:"记事本"},
        // {sign:"web",name:"网页文档"},
        // {sign:"zip",name:"压缩文档"},
        {sign:"",name:"全部"},
        {sign:"dir",name: "文件夹"},
        {sign:"photo",name:"图片"},
        {sign:"word",name:"Word文档"},
        {sign:"ppt",name:"PPT文档"},
        {sign:"execl",name:"Excel文档"},
        {sign:"pdf",name:"PDF文档"},
        {sign:"cad",name:"CAD文档"},
        {sign:"project",name:"Project文档"},
        {sign:"audio",name:"音频"},
        {sign:"video",name:"视频"},
        {sign:"other",name:"其它"},
      ], //下拉选框内容
      isDropdownShow: false, //控制下拉选框显示变量
    };
  },
  methods: {
    //点击全部展示下拉框内容
    showTypeFn() {
      if(this.isDropdownShow){
        this.isDropdownShow = false;
      }else{
        this.isDropdownShow = true;
      }
    },
    // 选择下拉选框中内容
    chooseTypeFn(val) {
      this.typevalue = val.name;
      this.typeSign = val.sign;
      this.isDropdownShow = false;
    },
    //点击搜索按钮查询搜索结果
    getSearchDataFn() {
      var obj = {type:this.typeSign,content:this.inputvalue}
      console.log(obj)
      this.$emit("searchContent", obj);
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../../assets/css/common/search.less);
</style>


